<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <button @click="btnClick">按钮</button>

  <ul>
    <li v-for="item in letters">{{item}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters: ['A', 'B', 'C', 'D', 'E', 'F', 'Z', 'X', 'Y']
    },
    methods: {
      btnClick() {
        // 1. push()  添加一个元素到数组尾部
        // this.letters.push('aaa');
        // this.letters.push('aaa', 'bbb', 'ccc');

        // 2. pop()  删除数组中最后一个元素
        // this.letters.pop();

        // 3. shift()  删除数组中第一个元素
        // this.letters.shift();

        // 4. unshift()  添加一个元素到数组头部
        // this.letters.unshift('aaa');
        // this.letters.unshift('aaa', 'bbb', 'ccc');

        // 5. splice()  删除元素/插入元素/替换元素
        // 删除元素：第一个参数是开始删除位置的索引，第二个参数是要删除元素的个数，如果没有传值，则删除后面所有元素
        // this.letters.splice(1, 2);

        // 替换元素：第一个参数是开始替换位置的索引，第二个参数是要替换元素的个数，后面的参数是用来替换前面的元素
        //this.letters.splice(1, 2, 'aaa', 'bbb');

        // 插入元素：第一个参数是开始插入位置的索引，第二个参数传 0，后面的参数是要插入的元素
        // this.letters.splice(1, 0, 'aaa', 'bbb');

        // 6. sort()  排序
        // this.letters.sort();

        // 7. reverse()  反转
        // this.letters.reverse();

        // 以上方法都是响应式的

        // 8. 通过索引修改数组中的元素不是响应式的
        // this.letters[0] = 'bbb';

        // 如何做到响应式？

        // 方法一：通过数组的splice方法替换
        // this.letters.splice(0, 1, 'bbb');

        // 方法二：通过Vue的set(目标对象, 索引值, 修改后的值)方法
        Vue.set(this.letters, 0, 'bbb')
      }
    }
  });
</script>
</body>
</html>